<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%= basePath%>">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<%--jquery.bs_pagination分页插件包引入--%>
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
<script type="text/javascript">

	$(function(){
		queryActivityByConditionForPage(1,10)

	//	给查询按钮添加点击事件
		$("#selectBtn").click(function () {
			queryActivityByConditionForPage(1,$("#demo_page1").bs_pagination('getOption','rowsPerPage'));

		});
		
	});
	//按条件分页查询活动
	function queryActivityByConditionForPage(pageNo,pageSize) {

		var owner  = $.trim($("#select-owner").val());
		var  name = $.trim($("#select-name").val());
		var  customerId= $.trim($("#select-customerId").val());
		var  source= $.trim($("#select-source").val());
		var  stage = $.trim($("#select-stage").val());
		var  type= $.trim($("#select-transactionType").val());
		var  contactsId = $.trim($("#select-contactsId").val());

		$.ajax({
			url:'workbench/transaction/selectTranDetailForPageByCondition.do',
			data:{
				owner:owner,
				name:name,
				customerId:customerId,
				source:source,
				stage:stage,
				type:type,
				contactsId:contactsId,
				pageNo:pageNo,
				pageSize:pageSize
			},
			type:'get',
			dataType:'json',
			success:function (data) {
				var htmlStr = "";
				$.each(data.tranList,function (index,obj) {
					htmlStr += '<tr>'
					htmlStr += '<td><input type="checkbox" value="'+obj.id+'" /></td>'
					htmlStr += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/transaction/detail.do?id='+obj.id+'\'">'+obj.name+'</a></td>'
					htmlStr += '<td>'+obj.customerId+'</td>'
					htmlStr += '<td>'+obj.stage+'</td>'
					htmlStr += '<td>'+obj.type+'</td>'
					htmlStr += '<td>'+obj.owner+'</td>'
					htmlStr += '<td>'+obj.source+'</td>'
					htmlStr += '<td>'+obj.contactsId+'</td>'
					htmlStr += '</tr>'
				})
				$("#Tbody").html(htmlStr);

				var totalPages = 1;
				if(data.total%pageSize==0){
					totalPages = data.total/pageSize;
				}else {
					// 如果是小数，则调用parseInt()函数取整数部分
					totalPages = parseInt((data.total/pageSize)+1);
				};
				//对容器调用bs_pagination工具函数显示翻页信息
				$("#demo_page1").bs_pagination({
					currentPage:pageNo,//当前页，相当于分页查询的pageNo(调用queryActivityByConditionForPage(pageNo,pageSize)函数把形参传过来)
					totalRows:data.total,//总条数
					rowsPerPage:pageSize,//每页显示的条数，相当于pageSize
					totalPages: totalPages,//总页数，必填参数（等于总条数totalRows/每页显示条数rowsPerPage）
					visiblePageLinks: 10,//设置最多可以显示多少卡片数
					showGoToPage: true,//是否显示“跳转”部分，默认true--显示
					showRowsPerPage: true,//是否显示“每页条数”部分，默认true--显示
					showRowsInfo: true,//是否显示记录的信息 。默认true--显示
					showRowsDefaultInfo: true,
					/**
					 * 用户每次切换页号，都自动触发该函数
					 * 每次返回切换页号之后的pageNo和pageSize
					 */
					onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
						//js代码  queryActivityByConditionForPage(pageNo,pageSize)
						$("#checkAll").prop("checked",false);
						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage)
					},
				});
			}
		});
	}
</script>
</head>
<body>

	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>交易列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input id="select-owner" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input id="select-name" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input id="select-customerId" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <br>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">阶段</div>
					  <select id="select-stage" class="form-control">
					  	<option></option>
<%--					  	<option>资质审查</option>--%>
<%--					  	<option>需求分析</option>--%>
<%--					  	<option>价值建议</option>--%>
<%--					  	<option>确定决策者</option>--%>
<%--					  	<option>提案/报价</option>--%>
<%--					  	<option>谈判/复审</option>--%>
<%--					  	<option>成交</option>--%>
<%--					  	<option>丢失的线索</option>--%>
<%--					  	<option>因竞争丢失关闭</option>--%>
						  <c:forEach items="${stageList}"  var="stage">
							  <option value="${stage.id}">${stage.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">类型</div>
					  <select id="select-transactionType" class="form-control">
					  	<option></option>
<%--					  	<option>已有业务</option>--%>
<%--					  	<option>新业务</option>--%>
                        <c:forEach items="${transactionTypeList}" var="type">
							<option value="${type.id}">${type.value}</option>
						</c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">来源</div>
				      <select id="select-source" class="form-control" id="create-clueSource">
						  <option></option>
<%--						  <option>广告</option>--%>
<%--						  <option>推销电话</option>--%>
<%--						  <option>员工介绍</option>--%>
<%--						  <option>外部介绍</option>--%>
<%--						  <option>在线商场</option>--%>
<%--						  <option>合作伙伴</option>--%>
<%--						  <option>公开媒介</option>--%>
<%--						  <option>销售邮件</option>--%>
<%--						  <option>合作伙伴研讨会</option>--%>
<%--						  <option>内部研讨会</option>--%>
<%--						  <option>交易会</option>--%>
<%--						  <option>web下载</option>--%>
<%--						  <option>web调研</option>--%>
<%--						  <option>聊天</option>--%>
						  <c:forEach items="${sourceList}" var="source">
							  <option value="${source.id}">${source.value}</option>
						  </c:forEach>
						</select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">联系人名称</div>
				      <input id="select-contactsId" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <button id="selectBtn" type="button" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 10px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" onclick="window.location.href='workbench/transaction/toSavePage.do';"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" onclick="window.location.href='edit.html';"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" /></td>
							<td>名称</td>
							<td>客户名称</td>
							<td>阶段</td>
							<td>类型</td>
							<td>所有者</td>
							<td>来源</td>
							<td>联系人名称</td>
						</tr>
					</thead>
					<tbody id="Tbody">
<%--						<tr>--%>
<%--							<td><input type="checkbox" /></td>--%>
<%--							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">动力节点-交易01</a></td>--%>
<%--							<td>动力节点</td>--%>
<%--							<td>谈判/复审</td>--%>
<%--							<td>新业务</td>--%>
<%--							<td>zhangsan</td>--%>
<%--							<td>广告</td>--%>
<%--							<td>李四</td>--%>
<%--						</tr>--%>
<%--                        <tr class="active">--%>
<%--                            <td><input type="checkbox" /></td>--%>
<%--                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">动力节点-交易01</a></td>--%>
<%--                            <td>动力节点</td>--%>
<%--                            <td>谈判/复审</td>--%>
<%--                            <td>新业务</td>--%>
<%--                            <td>zhangsan</td>--%>
<%--                            <td>广告</td>--%>
<%--                            <td>李四</td>--%>
<%--                        </tr>--%>
					</tbody>
				</table>
				<div id="demo_page1"></div>
			</div>
			
<%--			<div style="height: 50px; position: relative;top: 20px;">--%>
<%--				<div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>--%>
<%--				</div>--%>
<%--				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
<%--					<div class="btn-group">--%>
<%--						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
<%--							10--%>
<%--							<span class="caret"></span>--%>
<%--						</button>--%>
<%--						<ul class="dropdown-menu" role="menu">--%>
<%--							<li><a href="#">20</a></li>--%>
<%--							<li><a href="#">30</a></li>--%>
<%--						</ul>--%>
<%--					</div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
<%--				</div>--%>
<%--				<div style="position: relative;top: -88px; left: 285px;">--%>
<%--					<nav>--%>
<%--						<ul class="pagination">--%>
<%--							<li class="disabled"><a href="#">首页</a></li>--%>
<%--							<li class="disabled"><a href="#">上一页</a></li>--%>
<%--							<li class="active"><a href="#">1</a></li>--%>
<%--							<li><a href="#">2</a></li>--%>
<%--							<li><a href="#">3</a></li>--%>
<%--							<li><a href="#">4</a></li>--%>
<%--							<li><a href="#">5</a></li>--%>
<%--							<li><a href="#">下一页</a></li>--%>
<%--							<li class="disabled"><a href="#">末页</a></li>--%>
<%--						</ul>--%>
<%--					</nav>--%>
<%--				</div>--%>
<%--			</div>--%>
			
		</div>
		
	</div>
</body>
</html>